const common = require('./webpack.common')
const { merge } = require('webpack-merge') // 合并 webpack 配置
const { DefinePlugin, HotModuleReplacementPlugin } = require('webpack')

module.exports = merge(common, {
    mode: 'development',
    devtool: 'eval-cheap-module-source-map',
    module: {
        rules: [
            {
                test: /\.(vue|js)$/,
                exclude: /node_modules/, // 移除 node_modules 中的 js 代码
                use: ['eslint-loader'],
                enforce: 'pre' // pre 前置 | normal 正常| inline  | post 最后      require() : -! 不实用 pre  normal 处理； ! 不使用 normal 处理； !! 只使用 inline 处理
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"] // 从右往左顺序加载
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    devServer: {
        contentBase: './public', // 指定服务器访问静态资源
        open: true,
        port: 3000,
        hot: true,
        hotOnly: true // 防止开发时报错而刷新浏览器导致错误信息移除
    },
    plugins: [
        new DefinePlugin({
            BASE_URL: JSON.stringify("/public/") // 定义全局变量在开发环境 index.html 使用
        }),
        new HotModuleReplacementPlugin()
    ]
})